<template>
  <div class="activityarea-box">
    <!-- <div class="activity-ad"></div> -->
    <div class="activity-ad" :style="{backgroundImage : 'url('+ prefixImg +activityBgUrl+')'}"></div>
    <!-- 搜索 -->
    <div class="knife_container">
      <div class="activity-search-box search-pos ">
        <i class="el-icon-search search_posi vert-mid"></i>
        <input type="text" placeholder="搜索商品" v-model.trim="keyword" @keydown.13="getAllData" class="search_input"/>
        <span class="search_sure" @click="getAllData">确定</span>
      </div>
    </div>

    <!-- 搜索条件-->
    <ul class="selected-tag knife_container">
      <li class="fl pointer bread_a" @click="clearSelects('all')">
        全部结果
      </li>
      <i class="el-icon-arrow-right"></i>
      <li v-if="activityLen === 0 && keyword !== ''">
        <i class="el-icon-arrow-right"></i>
        <span>暂未找到与“<em class="color-red">{{keyword}}</em>”相关商品</span>
      </li>
      <li class="selected-item" v-show="categoryText">
        <i class="el-icon-arrow-right"></i>
        <span>{{categoryText}}</span>
        <i class="el-icon-error" @click="clearSelects('category')"></i>
      </li>

      <li class="selected-item" v-show="brandText">
        <i  class="el-icon-arrow-right"></i>
          <span>{{brandText}}</span>
          <i class="el-icon-error" @click="clearSelects('brand')"></i>
      </li>

      <li class="selected-item" v-show="othersText">
        <i class="el-icon-arrow-right"></i>
        <span>{{othersText}}</span>
        <i class="el-icon-error" @click="clearSelects('others')"></i>
      </li>
      <li class="selected-item" v-show="keyword">
        <i class="el-icon-arrow-right"></i>
        <span>{{keyword}}</span>
        <i class="el-icon-error" @click="clearSelects('keyword')"></i>
      </li>
      共<em class="color-red">{{goodsObj.totalRecords}}</em>件商品
    </ul>
    <!-- 菜单列表 -->
    <section class="category-box" v-if="activityLen">
      <div class="category-item knife_container">
        <div class="category-row">
          <span class="category-tit">商品名称</span>
          <section class="category-cont" :class="[collapseCate ? '':'isActive']">
            <div class="collose-tag collose-pos" v-if="cateHeight > 60"
              @click="collapseCate = !collapseCate">{{collapseCate ? '收起':'展开'}}
              <i :class="[collapseCate ? 'el-icon-arrow-up':'el-icon-arrow-down']"></i>
            </div>
            <div class="cont-item" ref="refCategory">
              <a class="cont-item_a" :class="{'active': categoryIds === ''}"
              @click="categoryIds = '', categoryText = '', getAllData()">全部商品</a>
              <a v-for="(item, index) in categoryList" :key="index"
                @click="clickCondi(item.id, 1, item.name)"  class="cont-item_a"
                :class="{'active': item.id === Number(categoryIds)}" :data-id="item.id" >
                {{item.name}}
              </a>
            </div>
          </section>
        </div>
        <!-- 品牌-->
        <div class="category-row">
          <span class="category-tit">品牌</span>
          <section class="category-cont" :class="[collapseBrand ? '':'isActive']">
            <div class="collose-tag collose-pos" v-if="brandHeight > 60" @click="collapseBrand = !collapseBrand">{{collapseBrand ? '收起':'展开'}} <i :class="[collapseBrand ? 'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
            <div class="cont-item brand-item" ref="refBrand">
              <a class="cont-item_a"  :class="{'active': brandIds === ''}"
              @click="brandIds = '', brandText = '', getAllData()">全部品牌</a>
              <a class="cont-item_a" v-for="(brand, brandIndex) in brandList" :key="brandIndex" :data-id="brand.id"
              :class="{'active': brand.id === Number(brandIds)}" @click="clickCondi(brand.id, 0, brand.name)">{{brand.name}}</a>
            </div>
          </section>
        </div>
        <!-- 属性 -->
        <div class="category-row" v-if="otherList.length > 0">
          <span class="category-tit">属性</span>
          <section class="category-cont" :class="[collapseOther ? '':'isActive']">
            <div class="collose-tag collose-pos" v-if="otherHeight > 60"  @click="collapseOther = !collapseOther">{{collapseOther ? '收起':'展开'}} <i :class="[collapseOther ? 'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
            <div class="cont-item brand-item" ref="refProperty">
              <a class="cont-item_a" v-for="other in otherList" :key="other"
              :class="{'active': other === othersIds}" @click="clickCondi(other, 2, other)">{{other}}</a>
            </div>
          </section>
        </div>
      </div>
    </section>
    <!-- !activityLen -->
    <div class="activity-product-body knife_container">
      <div v-if="!activityLen" class="search-box">
          <img src="../../../images/data_no.png" width="180px" style="margin-bottom: 30px;" alt="">
          <p class="search-notice">抱歉，暂未找到<span v-if="keyword">与“{{keyword}}”</span>相关商品，<span class="color-blue pointer" @click="clearCondi(), getAllData()">查看活动商品</span></p>
      </div>
      <TypeProduct :activityList="activityList" @refresh="fetchActivityList"></TypeProduct>
      <el-row v-if="goodsObj.totalPages > 1">
        <el-pagination class="page_box" background layout="total, prev, pager, next, ->" :current-page="page"
          :total="~~goodsObj.totalRecords" :page-size="~~goodsObj.pageSize" @current-change="handlePage" ></el-pagination>
      </el-row>
    </div>
    <!--活动结束后 用户一直在这个页面弹窗 -->
    <section class="activity-wrapper mask" v-if="!underway">
      <div class="actvity-notice-pop">
        <div class="activity-over-text">
          本场活动已结束
        </div>
        <router-link :to="{name: 'Index'}" replace class="btn-pop-over">去首页</router-link>
      </div>
    </section>
  </div>
</template>

<script>
import { StepProduct, TypeProduct } from '@/components/index'
import { getCategoryListByKeyword, getBrandListByKeyword, getOtherListByKeyword, getProductListByKeyword } from '@/service/get-data'
import { mapActions, mapState } from 'vuex'
import { countDown } from '@/tool/tool'
import { InputNumber, Button, Row, Pagination } from 'element-ui'
import { getCookie } from '@/config/mUntils'
import { prefixImg } from '@/tool/index'
import _ from 'lodash'

export default {
  components: {
    TypeProduct,
    StepProduct,
    elInputNumber: InputNumber,
    elButton: Button,
    elRow: Row,
    elPagination: Pagination
  },
  computed: {
    ...mapState({
      cartlist: state => state.shopcart.cartlist,
      shopcartnum: state => state.shopcart.shopcartnum,
      limitArr: state => state.shopcart.limitArr
    }),
    amount () {
      return this.activityList && this.activityList.length
    },
    underway () {
      if (this.timerresult + '' === 'false') {
        return false
      }
      return true
    },
    activityLen () {
      return this.activityList && this.activityList.length
    },
    Exam () {
      return parseInt(getCookie('Exam'))
    },
    loginStatus () {
      return this.$store.getters.loginStatus
    }
  },
  data () {
    return {
      prefixImg,
      activityBgUrl: this.$route.query.bannerUrl,
      // style: {
      //   backgroundImage: url('./img/banner.png'),
      //   backgroundPositon: 'center',
      //   backgroundRepeat: 'no-repeat'
      // },
      page: 1,
      num: 15,
      activityId: this.$route.params.activityId || 0,
      categoryText: '', // 选中名称的文字
      brandText: '', // 选中品牌的文字
      othersText: '', // 选中其他属性的文字
      collapseCate: false, // 分类是否展开
      collapseBrand: false, // 品牌是否展开
      collapseOther: false, // 其他属性是否展开
      selectType: '', // 主选0为品牌，1为类目
      goodsObj: {}, // 商品列表
      categoryList: [], // 类目列表
      categoryIds: '',
      brandList: [], // 品牌列表
      brandIds: '',
      goodsId: '', // 获取规格商品的id
      otherList: [],
      othersIds: '',
      shopcartId: '',
      brandHeight: '', // 品牌的高度
      cateHeight: '', // 类目的高度
      otherHeight: '', // 其他属性的高度
      activityList: null,
      timerresult: '', // 倒计时
      globalTimer: null,
      keyword: '' // 搜索关键字
    }
  },
  methods: {
    ...mapActions(['fetchActivityId', 'fetchOpenActivity', 'fetchCartList']),
    // 限购购物车
    limitProNum (value, index, step, objitem) {
      this.activityList = [...this.activityList] // 强制vue监听变化
      this.debounceLimitProNum(value, index, step, objitem)
    },
    debounceProNum () {
      this.debounceLimitProNum = _.debounce(function (value, index, step, objitem) {
        let result = this.authUserMethod
        if (!result) {
          return false
        }
        if (value === 0) return
        let surplusNum // 去掉购物车数量的剩余可购买数量
        let shopcatNum = 0
        // 如果不存在id请求购物车
        if (!this.shopcartId) {
          this.fetchCartList()
          this.shopcartId = this.$store.state.shopcart.shopCartId
        }
        let lastNum = value % step
        let leftNum = lastNum === 0 ? value : value - lastNum + step
        if (lastNum !== 0) {
          this.$message(`您当前选择的商品是${step}件一起采购哦`)
          // return
        }

        // 个人限购 商品不限购
        if (objitem.personalLimited) {
          this.limitArr.map((limitItm, limitInd) => {
            if (objitem.id === limitItm.pid) {
              shopcatNum = limitItm.num
            }
          })
          surplusNum = objitem.lastPersonalLimitNum - shopcatNum
          // 购物存货和限购数量一样 或 个人限购剩余数量为0
          if (surplusNum === 0 || objitem.lastPersonalLimitNum === 0) {
            this.$nextTick(() => {
              this.$refs[`pro_${index}`][0].setCurrentValue(0)
            })
            this.$message(`抱歉,此商品限购期间每人限购${objitem.personalLimitNum}件,您已达此商品的添加上限`)
          // 输入数量大于可购数量
          } else if (surplusNum > 0 && leftNum > surplusNum) {
            if (objitem.stockLimit && surplusNum > objitem.stock) {
              this.$nextTick(() => {
                this.$refs[`pro_${index}`][0].setCurrentValue(objitem.stock)
                // this.temporaryCart[objitem.id].num = objitem.stock
                // this.$refs[`pro_${index}`].setCurrentValue(objitem.stock)
              })
              this.$message(`您的选购数量已达库存数量`)
              return
            } else {
              this.$nextTick(() => {
                this.$refs[`pro_${index}`][0].setCurrentValue(surplusNum)
                // this.temporaryCart[objitem.id].num = surplusNum
                // this.$refs[`pro_${index}`].setCurrentValue(surplusNum)
              })
              this.$message('您的选购数量已达上限')
              return
            }
          }
        }

        // 商品限购
        if (objitem.stockLimit && leftNum > objitem.stock) {
          this.$message('您的选购数量已达库存数量')
          this.$nextTick(() => {
            this.$refs[`pro_${index}`][0].setCurrentValue(objitem.stock)
          })
          leftNum = objitem.stock
        } else {
          this.$nextTick(() => {
            this.$refs[`pro_${index}`][0].setCurrentValue(leftNum)
            // this.temporaryCart[objitem.id].num = leftNum
            // this.$refs[`pro_${index}`].setCurrentValue(leftNum)
          })
        }
      }, 100, {leading: true, trailing: false})
    },
    // 通过关键字获取类目列表
    async fetchCategoryList () {
      let res = await getCategoryListByKeyword(this.keyword, this.brandIds, this.selectType, this.othersIds, this.activityId)
      res = res.data
      if (res.resultCode && res.resultCode === 2000) {
        this.categoryList = res.data
      }
    },
    // 获取其他属性
    async fetchOtherListByKeyword () {
      let res = await getOtherListByKeyword(this.keyword, this.categoryIds, this.brandIds, this.selectType, this.activityId)
      res = res.data
      if (res.resultCode && res.resultCode === 2000) {
        this.otherList = res.data
      }
    },
    // 通过关键字获取品牌列表
    async fetchBrandList () {
      let res = await getBrandListByKeyword(this.keyword, this.categoryIds, this.selectType, this.othersIds, this.activityId)
      res = res.data
      if (res.resultCode && res.resultCode === 2000) {
        this.brandList = res.data
      }
    },
    // 点击品牌或者分类
    clickCondi (id, type, text) {
      this.selectType = type
      if (type === 1) {
        this.categoryIds = id
        this.categoryText = text
      } else if (type === 0) {
        this.brandIds = id
        this.brandText = text
      } else {
        this.othersIds = id
        this.othersText = text
      }
      this.getAllData()
    },
    // 活动商品
    async fetchActivityList () {
      let res = await getProductListByKeyword(this.page, this.num, this.activityId, this.keyword, this.categoryIds, this.brandIds, this.othersIds, false, this.username, false)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        this.goodsObj = res.data.data.page
        this.activityList = res.data.data.list
        let replaceReg = new RegExp(this.keyword, 'g')
        let repalceStr = `<span class="color-red">${this.keyword}</span>`
        this.activityList.forEach((goodsItem, goodsIndex) => {
          if (this.keyword) {
            goodsItem.detail = goodsItem.detail.replace(replaceReg, repalceStr)
            goodsItem.goodsName = goodsItem.goodsName.replace(replaceReg, repalceStr)
            goodsItem.brandName = goodsItem.brandName.replace(replaceReg, repalceStr)
          }
          goodsItem.maxNum = goodsItem.stockLimit ? goodsItem.stock : 9999
          goodsItem.number = 0
        })
        // this.activityList = list
      } else {
        this.$message.error({
          message: res.data.resultMsg
        })
      }
    },
    handlePage (page) {
      this.page = page
      this.fetchActivityList()
      // 切换页面 页面滑动到头部
      document.body.scrollTop = document.documentElement.scrollTop = 870
    },
    getAllData () {
      this.page = 1
      this.fetchActivityList()
      this.fetchCategoryList()
      this.fetchBrandList()
      this.fetchOtherListByKeyword()
    },
    clearSelects (type) {
      if (type === 'all') {
        this.categoryText = ''
        this.brandText = ''
        this.othersText = ''
        this.categoryIds = ''
        this.brandIds = ''
        this.othersIds = ''
        this.keyword = ''
      } else if (type === 'keyword') {
        this.keyword = ''
      } else {
        this[`${type}Text`] = ''
        this[`${type}Ids`] = ''
      }
      this.getAllData()
    },
    clearCondi () {
      this.categoryText = ''
      this.brandText = ''
      this.othersText = ''
      this.categoryIds = ''
      this.brandIds = ''
      this.othersIds = ''
      this.keyword = ''
    },
    // 倒计时 2018-09-10 2018-09-30
    startCountFn (timeParm) {
      var vm = this
      var timer = setInterval(function () {
        vm.timerresult = countDown(timeParm)
        if (vm.timerresult + '' === 'false') {
          window.clearInterval(timer)
          vm.activityTime()
        }
        vm.dayNum = vm.timerresult.substr(0, 1)
      }, 1000)
      vm.globalTimer = timer
    },
    activityTime () {
      this.fetchOpenActivity().then(res => {
        this.openedActList = (res && res[0]) || {}
        let timeParm
      // 周周活动结束
        if (!('id' in this.openedActList)) {
          return
        }
        timeParm = this.openedActList.endTime
        // timeParm = '2018-09-05 00:00:00'
        const timeStarStamp = (new Date(timeParm.replace(/-/g, '/'))).getTime()
        let nowTime = (new Date()).getTime()
        // 周周活动进行时
        if (nowTime > timeStarStamp) {
          // this.weekActivity = true
          return
        }
        // 周周活动倒计时
        // this.weekActivity = false
        this.startCountFn(timeParm)
      })
    }
  },
  mounted () {
    // this.fetchActivityId().then((res) => {
    //   this.activityId = res
    //   this.getAllData()
    // })
    this.getAllData()
    this.debounceProNum()
    // this.activityTime()
  },
  beforeDestroy () {
    var vm = this
    window.clearInterval(vm.globalTimer)
    vm.globalTimer = null
  },
  watch: {
    // 高度监测
    otherList () {
      setTimeout(() => {
        if (this.$refs.refProperty) {
          let height = this.$refs.refProperty.offsetHeight
          this.otherHeight = height
        }
      }, 1000)
    },
    brandList () {
      setTimeout(() => {
        if (this.$refs.refBrand) {
          let height = this.$refs.refBrand.offsetHeight
          this.brandHeight = height
        }
      }, 1000)
    },
    categoryList (val) {
      setTimeout(() => {
        if (this.$refs.refCategory) {
          let height = this.$refs.refCategory.offsetHeight
          this.cateHeight = height
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-ad{
  width: 100%;
  height: 520px;
  background-image: url("./img/banner.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
  .bread_a{
    position: relative;
    &:after{
      position: absolute;
      content: '';
      width: 30px;
      height: 3px;
      background: #FDAE3F;
      border-radius: 2px;
      bottom: -4px;
      left: 50%;
      margin-left: -15px;
    }
  }
  .activity-banner-box{
    position:relative;
    text-align: center;
    cursor: pointer;
    .activity-img{
      width:100%;
    }
  }
  .act-name-box{
    margin: 0 auto;
    width: 1200px;
    overflow: hidden;
    .act-item{
      width: 33.3%;
      line-height: 85px;
      text-align: center;
      font-size:28px;
      float: left;
      background: #E2E2E2;
      color: #999999;
      &.active{
        color: #333333;
        background: #fff;
      }
    }
  }
  // 分类
  .category-box {
    position: relative;
    .category-row{
      overflow: hidden;
      // display: flex;
      // border-bottom: 1px solid #e6e6e6;
      // justify-content: flex-start;
      transition: all 0.3s;
      background: #ececec;
    }

    .category-tit {
      // display: table-cell;
      float: left;
      text-align: center;
      color: #858585;
      width:105px;
      line-height: 60px;
      font-size: 16px;
      border-bottom: 1px solid #ececec;
    }
    .category-cont{
      position: relative;
      background: #fff;
      height: auto;
      /* margin-left: 90px; */
      float: left;
      width: 1085px;
      border-bottom: 1px solid #ececec;
    }
    .cont-item {
      // width: 1110px;
      //height: 60px;
      // line-height: 60px;
      border-bottom: 1px solid #e6e6e6;
      padding: 10px 150px 10px 0;
      &:last-child {
        border-bottom: none;
      }
    }
    .cont-item_a{
      color: #666;
      font-size: 14px;
      display: inline-block;
      padding: 13px 20px 13px 24px;
      &.active{
        color:#EE0000;
      }
    }
      .isActive{
      height: 60px;
      overflow: hidden;
    }
  }
  .collose-tag{
    font-size: 12px;
    color: #999;
    cursor: pointer;
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .collose-pos{
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .activity-product-body{
    margin-top: 20px;
    margin-bottom: 60px;
  }
  .selected-tag{
    overflow: hidden;
    margin-bottom: 15px;
    color: #767676;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
  }
  .selected-item{
    float: left;
    margin-right: 2px;
    cursor: pointer;
  }
  .show-time-box{
    position: relative;
    margin-top: -85px;
    background: #fff;
    margin-bottom: 20px;
    .act-show-box {
      padding: 36px 78px;
      font-size: 20px;
      color: #999999;
    }
    .count-down-box{
      display: inline-block;
      position: absolute;
      text-align: right;
      right: 78px;
      .red-notice{
        color:rgba(207,11,11,1);
        line-height:28px;
        font-size: 20px;
        margin-bottom: 10px;
        text-align: left;
        padding-left: 4px;
      }
    }
    .count-down-text{
      font-size:20px;
      line-height:28px;
      color: #999999;
      margin-top: 11.8px;
    }
  }
  .count-down-time{
    background:rgba(255,255,255,1);
    border:2px solid rgba(207,11,11,1);
    padding: 12px 11px;
    font-size: 0;
    .count-time{
      font-size: 59px;
      display: inline-block;
      width:58px;
      height:80px;
      background:rgba(207,11,11,1);
      line-height: 80px;
      color:rgba(255,255,255,1);
      text-align: center;
      margin-right: 4.6px;
      vertical-align: middle;
      &:last-child{
        margin-right: 0;
      }
    }
    .count-colon{
      font-size: 59px;
      padding: 0 10px 0 5px;
      color: #CF0B0B;
      vertical-align: middle;
      // margin: 0 -23px;
    }

  }
  .activity-over{
    font-size: 50px;
    color: #cf0b0b;
    padding: 20px 0;
    text-align: center;
  }
  .activity-over-text{
    color: #6B6B6B;
    font-size: 22px;
    margin-bottom: 47px;
  }
  .btn-pop-over{
    width:200px;
    height:50px;
    background:rgba(255,225,0,1);
    border-radius:5px;
    color:rgba(48,48,48,1);
    display: inline-block;
    line-height: 50px;
  }
  //搜索
  .activity-search-box{
    // float: right;
    vertical-align: middle;
    width: 100%;
    height: 45px;
    line-height: 45px;
    background: rgba(235,235,235,1);
    border-radius: 100px;
    overflow: hidden;
    padding-left: 30px;
    margin-top: 40px;
    margin-bottom: 10px;
    box-sizing: border-box;
    .search_posi{
      font-size: 19px;
      color: #858585;
    }
    .search_input{
      width: 70%;
      font-size: 14px;
      vertical-align: middle;
      background: rgba(235,235,235,1);
    }
    .search_sure{
      font-family: PingFangSC-Medium;
      float: right;
      font-size: 16px;
      width: 160px;
      height: 45px;
      line-height: 45px;
      background: rgba(251,205,59,1);
      font-weight:500;
      text-align: center;
      color: #333333;
      cursor: pointer;
    }
  }
  .search-box{
    margin: 160px 0;
    text-align: center;
    .search-img{
      margin-bottom: 30px;
    }
    .search-notice{
      color:rgba(51,51,51,1);
      font-size:16px;
      line-height:33px;
      margin-bottom: 20px;
    }
    .search-result{
      display: inline-block;
      width:300px;
      height:54px;
      line-height: 54px;
      background:rgba(255,204,0,1);
      border-radius:4px;
      color:rgba(68,68,68,1);
      text-align: center;
      cursor: pointer;

    }
  }
  .product-list-item{
    font-size: 0;
    padding: 10px 20px 10px 30px;
    position: relative;
    height: 100px;
    margin-top: 10px;
    background: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    .goods-image{
      display: inline-block;
      vertical-align: top;
      width: 79px;
      height: 79px;
      border: 1px solid #e6e6e6;
      position: relative;
      img{
        width: 100%;
        // height: 90px;
      }
    }
    .goods-info{
      display: inline-block;
      vertical-align: top;
      width: 280px;
      margin: 0 120px 0 10px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .goods-detail{
        display: block;
        font-size: 14px;
        color: #222;
        margin-top: 5px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
      }
      .goods-name{
        font-size: 12px;
        color: #888;
        margin: 5px 0;
      }
      .goods-price{
        display: inline-block;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-top: 15px;
        font-size: 14px;
        .current-price{
          color: #f03a58;
          font-size: 16px;
        }
        .old-price{
          color: silver;
          font-size: 16px;
          text-decoration: line-through;
        }
      }
    }
    .goods-stock{
      display: inline-block;
      color: #666;
      font-size: 14px;
      line-height: 16px;
      vertical-align: middle;
      margin-right: 20px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .goods-right-order{
      float: right;
      position: relative;
      display: inline-block;
      vertical-align: top;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin-top: 25px;
      font-size: 14px;
    }
    .goods-input-number{
      width: 100px;
      margin-top: 3px;
      vertical-align: top;
    }
    .goods-btn-add{
      margin-left: 20px;
      color: #333;
    }
    .goods-right-packing{
      position: absolute;
      bottom: -18px;
      font-size: 12px;
      color: #B0B0B0;
      padding-left: 108px;
    }
  }

</style>
<style lang="scss">
  .el-input-number--mini{
    width: 90px;
  }
  .el-input-number__increase, .el-input-number__decrease{
    background: #ffffff;
  }
  .el-input-number--mini .el-input__inner {
    padding-left: 30px!important;
    padding-right: 30px!important;
  }
</style>

